<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<style type="text/css">
.cornPanel {
	line-height: 18px
}

.cornPanel label {
	width: 20px; display: inline-block
}

.appointPanel {
	padding-top: 10px
}
</style>

<form:form commandName="model" cssClass="validate" action="app/job/save">
	<form:hidden path="id" />
	<table class=" form-table">
		<tbody>
			<tr>
				<td class="td1">名称：</td>
				<td class="td2"><form:input path="name" cssClass="required" />
				</td>
			</tr>
			<tr>
				<td class="td1">beanId：</td>
				<td class="td2"><form:input path="beanId" cssClass="required" /><input
					type="button" value="执行一次此任务" class="sbutton" id="btnRun">
				</td>
				</td>
			</tr>
			<tr>
				<td class="td1">运行表达式：</td>
				<td class="td2"><form:input path="cronExpression"
						cssClass="required" cssStyle="width:240px" /><input type="button"
					value="反解析到UI" class="sbutton" id="btnFan">
				</td>
			</tr>
			<tr>
				<td class="td1">描述：</td>
				<td class="td2"><form:textarea path="description"
						cssStyle="width:240px" /></td>
			</tr>

			<tr>
				<td class="td1">当前状态：</td>
				<td class="td2"><form:input path="status" cssClass="required" />
				</td>
			</tr>

		</tbody>
	</table>
</form:form>

<div class="box tabbedBox"
	style="border-top:1px solid #b9b9b9 !important">
	<div class="header">
		<ul>

			<li class="current"><a href="#exMinTab">分钟</a>
			</li>
			<li><a href="#exHourTab">小时</a>
			</li>
			<li><a href="#exDayTab">日</a>
			</li>
			<li><a href="#exMonTab">月</a>
			</li>
			<li><a href="#exWeekTab">星期</a>
			</li>
		</ul>

	</div>
	<div style="padding:0" class="content tabbed">

		<div id="exMinTab">
			<div title="分钟" style="padding:20px">
				<input type="radio" name="rMin" checked="checked" value="*"
					id="radioMin"><label for="radioMin">周期</label> 从 <input
					type="text" class="number" data-options="min:0,max:60"
					style="width:60px;" value="0" id="minStart">分钟开始,每<input
					type="text" class="number" data-options="min:1,max:60"
					style="width:60px;" value="0" id="minEnd"></input>分钟执行一次

				<div class="appointPanel">
					<input type="radio" name="rMin" name="zq" value="c" id="radioMin2"><label
						for="radioMin2">指定</label>
				</div>
				<div id="minPanel" class="cornPanel"></div>

			</div>

		</div>
		<div id="exHourTab">

			<div title="小时" style="padding:20px">
				<input type="radio" name="rHour" id="hourId" checked="checked"
					value="*"><label for="hourId">每小时</label>
				<div class="appointPanel">
					<input type="radio" name="rHour" id="hourId2" value="c"><label
						for="hourId2">指定</label>
				</div>
				<div id="hourPanel" class="cornPanel"></div>

			</div>

		</div>
		<div id="exDayTab">
			<div title="日" style="padding:20px">
				<input type="radio" name="rDay" id="dayId" checked="checked"
					value="*"><label for="dayId">每日</label>
				<div class="appointPanel">
					<input type="radio" name="rDay" id="dayId2" value="c"><label
						for="dayId2">指定</label>
				</div>
				<div id="dayPanel" class="cornPanel"></div>

			</div>


		</div>
		<div id="exMonTab">
			<div title="月" style="padding:20px">
				<input type="radio" name="rMon" id="monId" checked="checked"
					value="?"><label for="monId">每月</label>
				<div class="appointPanel">
					<input type="radio" name="rMon" id="monId2" value="c"><label
						for="monId2">指定</label>
				</div>
				<div id="monPanel" class="cornPanel"></div>

			</div>


		</div>
		<div id="exWeekTab">
			<div title="星期" style="padding:20px">
				<input type="radio" name="rWeek" id="weekId" checked="checked"
					value="?"><label for="weekId">每星期</label>
				<div class="appointPanel">
					<input type="radio" name="rWeek" id="weekId2" value="c"><label
						for="weekId2">指定</label>
				</div>
				<div id="weekPanel" class="cornPanel"></div>
			</div>

		</div>
	</div>

</div>

<div id="cornResult" class="box" style="padding:20px 0">

	<table>
		<tbody>
			<tr>
				<td></td>
				<td>秒</td>
				<td>分钟</td>
				<td>小时</td>
				<td>日</td>
				<td>月</td>
				<td>星期</td>
				<td></td>
			</tr>
			<tr>
				<td>表达式描述:</td>
				<td><input id="exSec" style="width:60px">
				</td>
				<td><input id="exMin" style="width:60px">
				</td>
				<td><input id="exHour" style="width:60px">
				</td>
				<td><input id="exDay" style="width:60px">
				</td>
				<td><input id="exMon" style="width:60px">
				</td>
				<td><input id="exWeek" style="width:60px">
				</td>
				<td><input type="button" value="生成表达式" id="btnGen"
					class="sbutton">
				</td>
			</tr>

		</tbody>
	</table>
	<br> <br>

</div>


<script type="text/javascript">

var mini = "";
for(var i=0;i<60;i++){
	var a = i+1;
	if(a==60){a=0;}
	mini+="<input type='checkbox' id='mininame_"+a+"' value='"+a+"' name='minchk' disabled='disabled'><label for='mininame_"+a+"'>"+a+"</label>";
	if(a!=0&&a%10==0){
		mini+="<br>";
	}
}
$("#minPanel").html(mini);

var day = "";
for(var i=0;i<31;i++){
	var a = i+1;
	day+="<input type='checkbox' id='dayname_"+a+"' value='"+a+"' name='daychk' disabled='disabled'><label for='dayname_"+a+"'>"+a+"</label>";
	if(a!=0&&a%10==0){
		day+="<br>";
	}
}
$("#dayPanel").html(day);

var mon = "";
for(var i=0;i<12;i++){
	var a = i+1;
	mon+="<input type='checkbox' id='monname_"+a+"' value='"+a+"' name='monchk' disabled='disabled'><label for='monname_"+a+"'>"+a+"</label>";
	if(a!=0&&a%10==0){
		mon+="<br>";
	}
}
$("#monPanel").html(mon);

var week = "";
for(var i=0;i<7;i++){
	var a = i+1;
	week+="<input type='checkbox' id='weekname_"+a+"' value='"+a+"' name='weekchk' disabled='disabled'><label for='weekname_"+a+"'>"+a+"</label>";
}
$("#weekPanel").html(week);

var hour = "AM:";
for(var i=0;i<24;i++){
	var a = i+1;
	if(a==24)a=0;
	hour+="<input type='checkbox' id='hourname_"+a+"' value='"+a+"' name='hourchk' disabled='disabled'><label for='hourname_"+a+"'>"+a+"</label>";
	if(a!=0&&a%12==0&&a!=24){
		hour+="<br>PM:";
	}
}
$("#hourPanel").html(hour);


function getMin(){
	var minR = 	$("input[name='rMin']:checked").val();
	if(minR == 'c'){
		var cks = $("input[name='minchk']:checked");
		if(cks.length==1){
			return 	cks[0].value;
		}else{
			var vs = "";
			for(var i=0;i<cks.length;i++){
				vs+=cks[i].value;
				if(i<cks.length-1){
					vs+=","	
				}
			}
			return vs;
		}
	}else{
		return $("#minStart").val()+"/"+$("#minEnd").val();
	}
}

function getHour(){
	var HourR = 	$("input[name='rHour']:checked").val();
	if(HourR == 'c'){
		var cks = $("input[name='hourchk']:checked");
		if(cks.length==1){
			return 	cks[0].value;
		}else{
			var vs = "";
			for(var i=0;i<cks.length;i++){
				vs+=cks[i].value;
				if(i<cks.length-1){
					vs+=","	
				}
			}
			return vs;
		}
	}
	return "*";
}

function getWeek(){
	var WeekR = 	$("input[name='rWeek']:checked").val();
	if(WeekR == 'c'){
		var cks = $("input[name='weekchk']:checked");
		if(cks.length==1){
			return 	cks[0].value;
		}else{
			var vs = "";
			for(var i=0;i<cks.length;i++){
				vs+=cks[i].value;
				if(i<cks.length-1){
					vs+=","	
				}
			}
			return vs;
		}
	}
	return "?";
}

function getDay1(){
	var DayR = 	$("input[name='rDay']:checked").val();
	if(DayR == 'c'){
		return $("input[name='daychk']:checked").val();
	}
	return "*";
}

function getMon(){
	var MonR = 	$("input[name='rMon']:checked").val();
	if(MonR == 'c'){
		return $("input[name='monchk']:checked").val();
	}
	return "*";
}

function initChecks(){
	$("input[name='rMin']").click(function(){						  
		var v = $(this).val();
		if("c"==v){
				$("input[name='minchk']").removeAttr("disabled");
		}else{
			$("input[name='minchk']").attr("disabled","disabled");
		}
	});	 
	$("input[name='rHour']").click(function(){						  
		var v = $(this).val();
		if("c"==v){
				$("input[name='hourchk']").removeAttr("disabled");
		}else{
			$("input[name='hourchk']").attr("disabled","disabled");
		}
	});	
	$("input[name='rDay']").click(function(){						  
		var v = $(this).val();
		if("c"==v){
				$("input[name='daychk']").removeAttr("disabled");
		}else{
			$("input[name='daychk']").attr("disabled","disabled");
		}
	});	
	$("input[name='rMon']").click(function(){						  
		var v = $(this).val();
		if("c"==v){
				$("input[name='monchk']").removeAttr("disabled");
		}else{
			$("input[name='monchk']").attr("disabled","disabled");
		}
	});	
	$("input[name='rWeek']").click(function(){						  
		var v = $(this).val();
		if("c"==v){
				$("input[name='weekchk']").removeAttr("disabled");
		}else{
			$("input[name='weekchk']").attr("disabled","disabled");
		}
	});	
}
function fanMin(txt){
	$("#exMin").val(txt);
	if(txt.indexOf('/')!=-1){
		var ts = txt.split("/");
		$("#minStart").val(ts[0]);
		$("#minEnd").val(ts[1]);
	}else{
		var mincks = $("input[name='minchk']");
		var mins = txt.split(",");
		for(var i=0;i<mincks.length;i++){
			mincks[i].disabled = null;
			mincks[i].disabled=false;
		}
		
		for(var i=0;i<mins.length;i++){
			mincks[mins[i]-1].checked = "checked";
		}
		
	}
}



function fanObj(txt,idTxt,exSuf){
	$("#ex"+exSuf).val(txt);

	if(txt=="*"||txt=="?"){	
		$("#"+idTxt+"Id").attr("checked","checked");
	}else{
		$("#"+idTxt+"Id2").attr("checked","checked");
		
		var cks = $("input[name='"+idTxt+"chk']");
		var arr = txt.split(",");
		for(var i=0;i<cks.length;i++){
			cks[i].disabled = null;
			cks[i].checked=false;
		}
		for(var i=0;i<arr.length;i++){
			cks[arr[i]-1].checked = true;
		}
		
		
	}
}

function fan(txt){
	var regs = txt.split(' ');
	$("#exSec").val(regs[0]);
	fanMin(regs[1]);
	fanObj(regs[2],"hour","Hour");
	fanObj(regs[3],"day","Day");
	fanObj(regs[4],"mon","Mon");
	fanObj(regs[5],"week","Week");
}

function changeByEx(){
	var html = "";
	var exLen = $("input[id^='ex']").size();
	$("input[id^='ex']").each(function(i){
		html+=$(this).val();	
		if(i<exLen-1){
			html+=" ";
		}
	})
	$("#cronExpression").val(html);
}
							
$(function(){
	 initChecks(); 
		   
	$("#btnGen").click(function(){
		$("#exSec").val(0);
		var mini = getMin();
		$("#exMin").val(mini);
		var hour = getHour();
		$("#exHour").val(hour);
		var day = getDay1();
		$("#exDay").val(day);
		var mon = getMon();
		$("#exMon").val(mon);
		var week = getWeek();
		$("#exWeek").val(week);
		var str = "0 "+mini+" "+hour+" "+day+" "+mon+" "+week;
		$("#cronExpression").val(str);
	});
	
	$("input[id^='ex']").keyup(function(){
		changeByEx();									
	})
	
	$("#btnFan").click(function(){
		var txt = $("#cronExpression").val();
		fan(txt);
	});
	
	$("#btnRun").click(function(){
		var beanId=$("#beanId").val();
		
		$.ajax({
	        type: "POST",
	        url: "app/job/runJob",
	        data: {"id":"${model.id}","beanId":beanId},
	        dataType: "json",
	        success: function(data){
	        	isperp.alert(data.data);
	        }
	                  
	    });
	});
	
	
	
	$("#btnFan").click();
});


</script>

<isperp:buttonList>
	<button class="submit" onclick="isperp.submitForm();">
		<span class="icon icon-save"></span>提交
	</button>
</isperp:buttonList>